<template>
  <div class="content">
    <div class="content_title">
      班级信息
      <el-button type="primary" size="small" @click="routeTo">
        班级学习成绩
      </el-button>
    </div>
    <div class="main_content" v-loading="loading">
      <div class="main_content_left">
        <el-image
          class="class_pic"
          fit="contain"
          :src="classInfo.classPic?classInfo.classPic:require('@/assets/images/class.png')"
          :preview-src-list="[classInfo.classPic?classInfo.classPic:require('@/assets/images/class.png')]"
          alt="加载失败"
        ></el-image>
      </div>
      <div class="main_content_right">
        <div class="content_lebal">
          <div class="title">
            班级名称：
          </div>

          <div class="content_value">
            {{ classInfo.className }}
          </div>
        </div>
        <div class="content_lebal">
          <div class="title">
            班级简介：
          </div>
          <div class="content_textarea" v-html="renderedText"></div>
        </div>
      </div>
    </div>
    <div class="student_content">
      <div class="student_title">
        学生信息
      </div>
      <div class="student_auto">
        <student :propsInfo="{branchId:branchId, majorId:classInfo.majorId, classId:classId}"></student>
      </div>
    </div>
  </div>
</template>

<script>
import { getPost_class } from '@/api/schoolOrganization/organization'
import student from '../student'

export default {
  name: 'classDetial',
  props: {
    classId: {
      type: [String, Number],
      default: ''
    },
    branchId: {
      type: [String, Number],
      default: ''
    },
    majorName: {
      type: [String, Number],
      default: ''
    },
    branchName: {
      type: [String, Number],
      default: ''
    }
  },
  components: {
    student
  },
  data() {
    return {
      loading: false,
      classInfo: {}
    }
  },
  computed: {
    renderedText() {
      return this.classInfo.content ? this.classInfo.content.replace(/\n/g, '<br>') : '--'
    }
  },
  watch: {
    classId: {
      handler(val, oldVal) {
        console.log(val, oldVal, 'classId')
        this.getClassDetial()
      },
      immediate: true
    }
  },
  methods: {
    routeTo() {
      this.$router.push({
        path: '/schoolOrganization/classStudyScore',
        query: {
          classId: this.classId,
          majorId: this.classInfo.majorId,
          branchId: this.branchId,
          majorName: this.majorName,
          branchName: this.branchName,
          className: this.classInfo.className
        }
      })
    },
    async getClassDetial() {
      this.loading = true
      let res = await getPost_class(this.classId)
      if (res.code == 200) {
        this.loading = false
        this.classInfo = res.data
      }
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  display: flex;
  flex-direction: column;

  .content_title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;

  }

  .main_content {
    margin-top: 10px;
    display: flex;
    align-items: center;

    &_left {
      padding: 10px;
      box-sizing: border-box;
      border-radius: 12px;
      background: white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);

      .class_pic {
        width: 320px;
        height: 200px;
        border-radius: 12px;
      }
    }

    &_right {
      margin-left: 10px;

      .content_lebal {
        width: 100%;
        color: #999999;
        display: flex;
        margin: 10px 0;

        .title {
          min-width: 88px;
        }

        .content_value {
          color: #333333;
        }

        .content_textarea {
          width: 500px;
          height: 160px;
          overflow: auto;
          color: #333333;
          word-wrap: break-word; /* 当单词超出容器宽度时自动换行 */
        }
      }
    }
  }

  .student_content {
    margin-top: 10px;

    .student_title {
      color: #333333;
      font-size: 16px;
      font-weight: bold;
    }

    .student_auto {
      height: calc(100vh - 196px);
      overflow: auto;
    }
  }
}
</style>
